<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 520px;
        height: 280px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }

      .imgContainer {
        position: absolute;
        width: 2600px;
        height: 280px;
        left: 0px;
      }

      .imgContainer img {
        float: left;
      }
      .box {
        width: 520px;
        height: 50px;
        font-size: 40px;
        position: absolute;
        top: 40%;
        color: white;
      }
      .box span:nth-child(1) {
        float: left;
      }
      .box span:nth-child(2) {
        float: right;
      }
      .box1 {
        width: 520px;
        height: 50px;
        position: absolute;
        bottom: 10%;
      }
      .box1 span {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        float: left;
        margin-left: 70px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="imgContainer">
        <img src="./images/下载.png" />
        <img src="./images/下载 (1).png" />
        <img src="./images/下载 (2).png" />
        <img src="./images/下载 (3).png" />
        <img src="./images/下载 (4).png" />
      </div>
      <div class="box">
        <span><</span>
        <span>></span>
      </div>
      <div class="box1">
        <span></span><span></span><span></span><span></span><span></span>
      </div>
    </div>

    <script>
      var imgContainerEle = document.querySelector(".imgContainer");
      var containerEle = document.querySelector(".container");
      var page = 1;
      //   setInterval(function () {
      //     move(imgContainerEle, -520 * page, "left", function () {
      //       console.log("运动完成");
      //       page++;
      //       if (page == 5) {
      //         page = 1;
      //       }
      //     });
      //   });
      //   自动播放
      function autoPlay() {
        var timer = setInterval(function () {
          move(imgContainerEle, -520 * page, "left", function () {
            // console.log("运动完成");
            page++;
            if (page == 6) {
              page = 1;
              imgContainerEle.style.left = "0px";
            }
          });
        }, 4000);
        containerEle.onmouseenter = function () {
          //   console.log("停止");
          clearInterval(timer);
        };
        containerEle.onmouseleave = function () {
          autoPlay();
        };
      }
      var spanEle = document.querySelectorAll(".box span");
      //   下一页
      spanEle[1].onclick = function () {
        move(imgContainerEle, -520 * page, "left", function () {
          // console.log("运动完成");
          page++;
          if (page == 6) {
            page = 1;
            imgContainerEle.style.left = "0px";
          }
        });
      };
      //   上一页
      spanEle[0].onclick = function () {
        move(imgContainerEle, -520 * page + 520, "left", function () {
          // console.log("运动完成");
          page--;
          if (page == 0) {
            page = 5;
            imgContainerEle.style.left = "-2600px";
          }
        });
      };
      // //   点击点对应图片

      var eles = document.querySelectorAll(".box1 span");
      eles.forEach(function (item, key) {
        item.onclick = function () {
          eles.forEach(function (item) {
            item.style.background = "red";
          });
          item.style.background = "white";
          var num = key + 1;
          move(imgContainerEle, -520 * num, "left", function () {
            page = num;
          });
        };
      });

      cloneElement();
      autoPlay();
      //   克隆元素；

      function cloneElement() {
        var firstEle = imgContainerEle.firstElementChild.cloneNode(true);

        var lastEle = imgContainerEle.lastElementChild.cloneNode(true);
        imgContainerEle.style.width = "3640px";
        imgContainerEle.appendChild(firstEle);
        imgContainerEle.insertBefore(
          lastEle,
          imgContainerEle.firstElementChild
        );
        // 把第一张显示左边的偏移量 改成-520；
        imgContainerEle.style.left = "-520px";
      }

      function move(ele, target, dir, cb) {
        function fn() {
          var num = parseInt(getComputedStyle(ele)[dir]);
          var speed = target < num ? -10 : 10;
          if (num == target) {
            // console.log("停止了");
            cb && cb();
          } else {
            num += speed;
            ele.style[dir] = num + "px";
            requestAnimationFrame(fn);
          }
        }
        fn();
      }
    </script>
  </body>
</html>
